<style>
.container {
  width: 1200px;
  height: 600px;
  overflow: hidden;
  margin: 0;
  font-family: "微软雅黑";
}
.container2 {
  width: 1100px;
  height: 900px;
}
</style>

<template>
  <div>
     <!-- <div id="container" class="container">
    </div> -->
     <div id="container2"  style="width:2559px;height:1080px;"></div>
  </div>
</template>
<script>
import { Map } from "../Map";
import echarts from "echarts";
import yunnan from "echarts/map/json/province/yunnan.json";
import china from "echarts/map/js/china.js";

import kunming from "../assets/city/530100.json";
import qujing from "../assets/city/530300.json";
import yuxi from "../assets/city/530400.json";
import baoshan from "../assets/city/530500.json";
import zhaotong from "../assets/city/530600.json";
import lijiang from "../assets/city/530700.json";
import puer from "../assets/city/530800.json";
import lincang from "../assets/city/530900.json";
import chuxiong from "../assets/city/532300.json";
import honghe from "../assets/city/532500.json";
import wenshan from "../assets/city/532600.json";
import banna from "../assets/city/532800.json";
import dali from "../assets/city/532900.json";
import dehong from "../assets/city/533100.json";
import nujiang from "../assets/city/533300.json";
import diqing from "../assets/city/533400.json";

export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      mapOption: {
        backgroundColor: "#404a59",
        title: {
          text: "云南省",
          left: "center",
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {
            type: "map",
            mapType: "yunnan",
            aspectScale: 0.9,
            zlevel: 1,
            label: {
              show: true,
              emphasis: {
                textStyle: {
                  color: "#000"
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: "#389BB7",
                areaColor: "#fff"
              },
              emphasis: {
                areaColor: "#389BB7",
                borderWidth: 5
              }
            },
            animation: false,
            data: [
              { name: "昆明市", value: "kunming", selected: false },
              { name: "曲靖市", value: "qujing", selected: false },
              { name: "玉溪市", value: "yuxi", selected: false },
              { name: "保山市", value: "baoshan", selected: false },
              { name: "昭通市", value: "zhaotong", selected: false },
              { name: "丽江市", value: "lijiang", selected: false },
              { name: "普洱市", value: "puer", selected: false },
              { name: "临沧市", value: "lincang", selected: false },
              { name: "楚雄彝族自治州", value: "chuxiong", selected: false },
              {
                name: "红河哈尼族彝族自治州",
                value: "honghe",
                selected: false
              },
              { name: "文山壮族苗族自治州", value: "wenshan", selected: false },
              { name: "西双版纳傣族自治州", value: "banna", selected: false },
              { name: "大理白族自治州", value: "dali", selected: false },
              {
                name: "德宏傣族景颇族自治州",
                value: "dehong",
                selected: false
              },
              { name: "怒江傈僳族自治州", value: "nujiang", selected: false },
              { name: "迪庆藏族自治州", value: "diqing", selected: false }
            ]
          }
        ]
      }
    };
  },
  mounted() {
    //this.showBaiduMap();
    echarts.registerMap("yunnan", yunnan);
    echarts.registerMap("kunming", kunming);
    echarts.registerMap("qujing", qujing);
    echarts.registerMap("yuxi", yuxi);
    echarts.registerMap("baoshan", baoshan);
    echarts.registerMap("zhaotong", zhaotong);
    echarts.registerMap("lijiang", lijiang);
    echarts.registerMap("puer", puer);
    echarts.registerMap("lincang", lincang);
    echarts.registerMap("chuxiong", chuxiong);
    echarts.registerMap("honghe", honghe);
    echarts.registerMap("wenshan", wenshan);
    echarts.registerMap("banna", banna);
    echarts.registerMap("dali", dali);
    echarts.registerMap("dehong", dehong);
    echarts.registerMap("nujiang", nujiang);
    echarts.registerMap("diqing", diqing);
    this.showProvince();
  },
  methods: {
    showBaiduMap() {
      Map().then(BMap => {
        var map = new BMap.Map("container");
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
        //添加地图类型控件
        map.addControl(
          new BMap.MapTypeControl({
            mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
          })
        );
        map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      });
    },
    showProvince() {
      var self = this;
      var yunnMap = this.mapOption;
      var myChart = echarts.init(document.getElementById("container2"));
      myChart.setOption(this.mapOption);
      // 处理点击事件并且跳转到相应的百度搜索页面
      myChart.on("click", function(params) {
        if (params.data != null) {
          self.mapOption.title.text = "云南省---" + params.data.name;
          self.mapOption.toolbox = {
            itemSize: 30,
            show: true,
            feature: {
              myTool: {
                show: true,
                title: "返回云南省地图",
                icon:
                  "path://M462.266 167.466l-328.098 284.381 328.098 284.359v-191.379s454.799-147.683 362.705 311.707c0 0 293.586-557.828-368.422-519.544l5.719-169.527z",
                onclick: function() {
                  self.mapOption.series[0].mapType = 'yunnan';
                  myChart.setOption(self.mapOption, true);
                }
              }
            },
            iconStyle: {
              borderWidth: 5,
              borderColor: "#fff",
              color: "#fff"
            }
          };
          for (var i = 0; i < self.mapOption.series[0].data.length; i++) {
            if (self.mapOption.series[0].data[i].value == params.data.value) {
              self.mapOption.series[0].data[i].selected = true;
            } else {
              self.mapOption.series[0].data[i].selected = false;
            }
          }
          self.mapOption.series[0].mapType = params.data.value;
          myChart.setOption(self.mapOption, true);
        }
      });
    }
  },
  created: function() {}
};
</script>
